<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

function handleClickLeft() {
  uni.navigateBack()
}
const tableValue = ref('1')
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden bg-white">
    <wd-navbar
      title="订单详情"
      left-text="返回"
      left-arrow
      :bordered="false"
      @click-left="handleClickLeft"
    />
    <scroll-view
      class="box-border flex-1 overflow-hidden p-[10px]"
      scroll-y
      :show-scrollbar="false"
    >
      <view>
        <wd-text text="订单号 200112304003400423043" size="16px" color="#333" />
        <wd-tag class="ml-4">联台</wd-tag>
        <wd-tag type="success" class="ml-2">已结账</wd-tag>
      </view>
      <view class="mt-3">
        <wd-text text="查看联台订单号明细" type="primary" size="14px" />
      </view>
      <view class="mt-3">
        <wd-radio-group v-model="tableValue" shape="button">
          <wd-radio value="1">全部桌台（共2桌）</wd-radio>
          <wd-radio value="2">6</wd-radio>
          <wd-radio value="3">7</wd-radio>
          <expand-bar expand-text="展开更多桌台" collapse-text="收起更多桌台" />
        </wd-radio-group>
      </view>
      <view class="mt-3 border-1 border-border border-solid">
        <wd-cell-group>
          <wd-cell title="订单原价(元)">
            <wd-text text="574.00" size="20px" color="#333" bold />
          </wd-cell>
          <wd-cell title="订单优惠(元)" label="折扣优惠-0.00 + 支付优惠-1.00" center>
            <wd-text text="-165.00" size="20px" color="#333" bold />
          </wd-cell>
          <wd-cell title="订单收入">
            <wd-text text="409.00" size="20px" color="#333" bold />
          </wd-cell>
        </wd-cell-group>
      </view>
      <view class="grid grid-cols-1 mt-3 gap-2">
        <wd-text text="门店：川妹子烤鱼" size="14px" color="#333" />
        <wd-text text="订单来源：收银pos" size="14px" color="#333" />
        <wd-text text="业务类型：正餐" size="14px" color="#333" />
        <wd-text text="用餐方式：堂食" size="14px" color="#333" />
        <wd-text text="桌号：6(大厅)、7(大厅)" size="14px" color="#333" />
        <wd-text text="桌台类型：堂食台" size="14px" color="#333" />
        <wd-text text="用餐人数：8" size="14px" color="#333" />
        <wd-text text="会员手机号：" size="14px" color="#333" />
        <wd-text text="会员姓名：" size="14px" color="#333" />
        <wd-text text="营业日期：2021-03-13" size="14px" color="#333" />
        <wd-text text="下单人：服务员姓名或扫码点餐用户" size="14px" color="#333" />
        <wd-text text="下单时间：2021-03-13  14:13:34" size="14px" color="#333" />
        <wd-text text="收银员：张亮" size="14px" color="#333" />
        <wd-text text="结账时间：2021-03-13  15:13:34" size="14px" color="#333" />
        <wd-text text="桌台备注：" size="14px" color="#333" />
        <wd-text text="整单备注：" size="14px" color="#333" />
      </view>
      <view class="mt-6">
        <wd-text text="菜品信息" color="#333" class="flex items-center">
          <template #prefix>
            <view class="mr-2 inline-block h-[16px] w-[3px] bg-primary" />
          </template>
          <template #suffix>
            <wd-text text="全部桌台" size="14px" class="ml-2" />
          </template>
        </wd-text>
        <view class="my-3">
          <uv-line />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-radio.is-button .wd-radio__label) {
  max-width: 180px;
  border-radius: 16px;
}
</style>
